import React, { Component } from 'react';
import { HashRouter as Router, Route, Switch, Link } from "react-router-dom";

import Article from '../Article/Article';
import NavStyle from "./Navbar.module.scss"
import Home from "../Home/Home"
import My from "../My/My"
import Find from "../Find/Find"
class Navbar extends Component {
    state = {
        nowlink: ''
    }
    componentDidMount() {
        console.log(this.props);
        this.setState({
            nowlink: this.props.location.pathname
        })
    }
    tabchange = (nowpage) => {
        this.setState({
            nowlink: nowpage
        })
    }
    // componentDidUpdate() {
    //     console.log(this.props);
    //     // this.setState({
    //     //     nowlink: this.props.location.pathname
    //     // })
    // }
    render() {
        console.log(this.state.nowlink);
        return (
            <Router>
                <div className={NavStyle.navbar}>
                    <div className={NavStyle.navbarbody}>
                        {/* 文章页面：负责人：魏学辉*/}
                        <Route path="/article" exact component={Article}></Route>
                        {/* 文章页面：负责人：魏学辉*/}
                        <Route path="/" exact component={Home}></Route>
                        {/* 文章页面：负责人：魏学辉*/}
                        <Route path="/my" exact component={My}></Route>
                        {/* 文章页面：负责人：魏学辉*/}
                        <Route path="/find" exact component={Find}></Route>
                    </div>
                    <div className={NavStyle.navbarfooter}>
                        <Link className={this.state.nowlink === "/" ? "activepage" : null} onClick={this.tabchange.bind(this, "/")} to="/"><span className="iconfont" >&#xe68e;</span>首页</Link>
                        <Link className={this.state.nowlink === "/article" ? "activepage" : null} onClick={this.tabchange.bind(this, "/article")} to="/article"><span className="iconfont" >&#xe63c;</span>头条</Link>
                        <Link className={this.state.nowlink === "/find" ? "activepage" : null} onClick={this.tabchange.bind(this, "/find")} to="/find"><span className="iconfont" >&#xe633;</span>发现</Link>
                        <Link className={this.state.nowlink === "/my" ? "activepage" : null} onClick={this.tabchange.bind(this, "/my")} to="/my"><span className="iconfont" >&#xe656;</span>我的</Link>
                    </div>
                </div>
            </Router>
        );
    }
}

export default Navbar;
